<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />

	<view class="fill">
		<view class="item" v-for="(item, index) in info.productsField" :key="index">
			<view class="product flex items-center justify-between">
				<image :src="imgUrl + item.icon" class="icon"></image>
				<view class="flex-1 oss">
					<view class="title">{{ item.title }}</view>
					<view class="price rmb-black">{{ item.vip_price }}</view>
				</view>
			</view>
			<view class="pro-score flex items-center" v-if="mode == 1">
				<view class="title">商品描述</view>
				<view class="rate">
					<uni-rate v-model="formRef[index].score" color="#CECECE" :is-fill="false" active-color="#FE7800" />
				</view>
			</view>
			<view class="content">
				<textarea v-model="formRef[index].content" :placeholder="placeholder" class="inp" placeholder-class="place-inp"></textarea>
			</view>
			<view class="images">
				<Upload v-model="formRef[index].imagesObj" :maxCount="5" :accept="accept" />
			</view>
		</view>

		<view class="soce-item" v-if="mode == 1">
			<view class="order-no flex items-center">
				<image :src="imgUrl + info.business?.cover"></image>
				<view>{{ info.business?.title }}</view>
			</view>

			<view class="pro-score flex items-center">
				<view class="title">描述相符</view>
				<view class="rate">
					<uni-rate v-model="describe_score" color="#CECECE" :is-fill="false" active-color="#FE7800" />
				</view>
			</view>
			<view class="pro-score flex items-center">
				<view class="title">服务态度</view>
				<view class="rate">
					<uni-rate v-model="service_score" color="#CECECE" :is-fill="false" active-color="#FE7800" />
				</view>
			</view>
			<view class="pro-score flex items-center">
				<view class="title">物流服务</view>
				<view class="rate">
					<uni-rate v-model="logistics_score" color="#CECECE" :is-fill="false" active-color="#FE7800" />
				</view>
			</view>
		</view>

		<view class="fixed-bottom">
			<view class="btn" @click="evaluateSave">
				<text>发布</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, nextTick } from 'vue';
	import { port, imgUrl, goUrl, hint, loading, closeLoading, goBack } from '../../service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import Upload from '/components/Uploads.vue';
	const order_id = ref('');
	const info = ref({});
	const mode = ref('');
	const val = ref(2);
	const formRef = ref([]);
	const placeholder = ref('请填写您对商品的评价~~');
	const logistics_score = ref(0);
	const service_score = ref(0);
	const describe_score = ref(0);
	const title = ref('商品评价');
	const accept = ref('image');
	const isLoad = ref(false);
	onLoad((e) => {
		if (e.order_id) {
			order_id.value = e.order_id;
		}
		if (e.mode) {
			mode.value = e.mode;
			if (parseInt(mode.value) == 2) {
				placeholder.value = '请填写您对商品的测评~~';
				title.value = '达人测评';
				accept.value = 'video';
			}
		}
	});

	onShow(() => {
		if (!isLoad.value) {
			getMyOrderInfo();
			isLoad.value = true;
		}
	});

	async function evaluateSave() {
		let product = [];
		let av = accept.value == 'image' ? 'images' : accept.value;
		formRef.value.forEach((v, i) => {
			if (v.imagesObj.length > 0) {
				let images = [];
				v.imagesObj.map((vv) => {
					images.push(vv.url);
				});
				v[av] = images.join(',');
			} else {
				v[av] = '';
			}
			let newObj = {
				id: v.id,
				pid: v.pid,
				content: v.content,
				score: v.score
			};

			newObj['images'] = v['images'];

			product.push(newObj);
		});
	
		loading();
		let res = await port('evaluateSave', {
			product: product,
			logistics_score: logistics_score.value,
			service_score: service_score.value,
			describe_score: describe_score.value,
			mode: mode.value,
			id: order_id.value
		});

		await nextTick();
		hint(res.msg);
		closeLoading();
		goBack();
	}

	async function getMyOrderInfo() {
		let res = await port('getMyOrderInfo', { id: order_id.value });
		info.value = res.data;
		let temp = [];
		res.data.productsField.map((v) => {
			temp.push({
				id: v.id,
				pid: v.pid,
				content: '',
				imagesObj: '',
				score: 0
			});
		});
		formRef.value = temp;
	
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.pro-score {
		margin-top: 25rpx;
		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}
		.rate {
			margin-left: 30rpx;
		}
	}

	.fill {
		padding-bottom: 220rpx;

		.soce-item {
			margin: 30rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 26rpx;
			.pro-score:first-child {
				margin-top: 0;
			}

			.order-no {
				// font-weight: 400;
				// font-size: 24upx;
				// color: #999999;
				> image {
					width: 36rpx;
					height: 36rpx;
					border-radius: 6rpx;
				}
				> view {
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
					margin-left: 20rpx;
				}
			}
		}

		.item {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 26rpx;
			margin: 30rpx;
			.product {
				.icon {
					width: 76rpx;
					height: 76rpx;
					border-radius: 16rpx;
				}
				.oss {
					margin-left: 10rpx;
					.title {
						font-weight: 400;
						font-size: 24rpx;
						color: #888888;
					}
					.price {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}

			.content {
				margin-top: 30rpx;
				.inp {
					font-weight: 400;
					font-size: 28rpx;
					width: 100%;
					height: 250rpx;
				}
				.place-inp {
					font-weight: 400;
					font-size: 28rpx;
					color: #bdbdbd;
				}
			}
		}
	}
</style>
